<template>
  <el-card>
    <div slot="header">
      <h3>开通账号</h3>
    </div>
    <div class="form_wrap">
      <el-form :model="formData" label-width="150px">
        <el-form-item label="选择供应商：">
          <el-input v-model="formData.supplierName" readonly>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSelectSupplier"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="账号关联手机号：">
          <el-input v-model="formData.mobilePhone" disabled></el-input>
        </el-form-item>
        <el-form-item label="供应商分类：">
          <el-input v-model="formData.supplierClassifyName" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleGoBack">返回</el-button>
      </el-row>
    </div>
    <SelectSupplierDialog
      :supplierVisible.sync="supplierVisible"
      @handle-select="getSelectSupplier"
    />
  </el-card>
</template>
<script>
import SelectSupplierDialog from '@/pages/supplier/components/SelectSupplierDialog';
import { openSupplierAccountService } from '@/api/supplier/management/supplierAccount';
import { getSupplierAccountParams } from './utils';
export default {
  components: { SelectSupplierDialog },
  data () {
    return {
      formData: {},
      supplierVisible: false,
    }
  },
  methods: {
    // 选择供应商
    handleSelectSupplier () {
      this.supplierVisible = true;
    },
    // 提交
    handleSubmit () {
      this.submitAccountInfo();
    },
    // 返回
    handleGoBack () {
      this.returnListPage();
    },
    getSelectSupplier (supplierInfo) {
      const { supplierName, accountPhone, supplierClassifyName } = supplierInfo;
      const mobilePhone = accountPhone;
      this.formData = {
        supplierName,
        mobilePhone,
        supplierClassifyName
      }
      this.submitParams = getSupplierAccountParams({ ...supplierInfo, mobilePhone });
    },
    // 提交账号信息
    async submitAccountInfo () {
      // if (!this.submitParams.createUser) { return this.$message.warning('用户信息获取失败！请重新登录。'); }
      let loadingInstance = this.$loading({ target: '.form_wrap' });
      try {
        const res = await openSupplierAccountService(this.submitParams);
        loadingInstance.close();
        if (res) {
          this.$message.success('提交成功');
          this.returnListPage();
        }
      } catch (err) {
        loadingInstance.close();
      }
    },
    // 返回列表页
    returnListPage () {
      this.$router.push({ name: 'supplierAccountList' });
    }
  }
}
</script>
<style scoped>
.form_wrap {
  width: 40%;
}
</style>
